<template>
	<div class="student">
		<h2>学生姓名:{{name}}</h2>
		<h2>学生年龄:{{age}}</h2>
		<button @click="showStudent">点我提示学生信息</button>
		<h2>我爹给我的：</h2>
		<h3>车名：{{che.name}}</h3>
		<h3>车价：{{che.price}}</h3>
		<h3>房子：{{fang}}</h3>
		<h3>财产：{{myQian+100}}</h3>
		<button @click="myQian+=500">儿子自己赚钱</button> <br><br>
		<button @click="che.price = 6000000">儿子开始装x了，车价改成6000000</button> <br><br>
		<button @click="che.name = '雅迪'">儿子开始装x了，车名改成雅迪</button> <br><br>
		<button @click="che = {name:'比亚迪',price:400000}">儿子开始装x了，彻底换掉这台车</button> <br><br>
	</div>
</template>

<script>
	export default {
		name:'Student',
		//第一种写法：（最简单的写法）只是声明接收
		// props:['che','fang','qian'],

		//第二种写法：声明接收+类型限制
		/* props:{
			che:Object,
			fang:String,
			qian:Number
		}, */

		//第三种写法：声明接收+类型限制+指定默认值+必要性限制
		props:{
			che:{
				required:true, //必要性
				type:Object, //数据类型
				default(){ //默认值
					return {name:'雅迪',price:2300}
				}, 
			},
			fang:{
				required:true, 
				type:String,
				default:'宏福苑地下室',
			},
			qian:{
				required:true,
				type:Number,
				default:1
			}
		},

		data() {
			return {
				name:'张三',
				age:18,
				myQian:this.qian
			}
		},
		methods: {
			showStudent(){
				alert(`${this.name}，${this.age}`)
			},
		}
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 10px;
	}
</style>